<template>
    <div class="admin-m-box">
        <div class="lists">
            <router-link
                    v-for="item of lists"
                    :to="{name: 'admin-room-details', query: {id: item.id}}"
                    class="item">
                <div class="body">
                    <div class="info">
                        <div class="user">
                            &#xe605; 房主：
                            {{item.user_name}}
                        </div>
                        <div class="status">
                            状态：
                            <span class="success" v-if="item.status === 1">通过</span>
                            <span class="close" v-else>关闭</span>
                        </div>
                    </div>
                    <div class="room" v-if="item.room !== null">
                        <div class="house">
                            &#xe600; 房间：
                            {{item.room.id || '还没有房间'}}
                        </div>
                        <div class="lease" v-if="item.room.id">
                            &#xe617;
                            {{item.room.end}}
                        </div>
                    </div>
                    <div class="room" v-else>
                        <div class="house">
                            &#xe600; 房间：
                            还没有房间
                        </div>
                    </div>
                </div>
                <div class="fx">
                    &#xe701;
                </div>
            </router-link>
        </div>
        <div class="next" v-if="!loading && !nullData">下一页 &#xe701;</div>
        <div class="loading" v-if="loading">数据加载中...</div>
        <div class="null" v-if="nullData">没有更多数据了</div>
    </div>
</template>

<script>
    import apiUrl from '@/api/apiUrl'
    import {Toast} from 'mint-ui'
    export default {
        name: "index",
        data () {
            return {
                lists: [],
                loading: false,
                nullData: false,
                page: 1,
                row: 20
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods: {
            loadMore() {
                this.page ++
                this.setData()
            },
            setData() {
                this.loading = true
                let params = {
                    params: {
                        page: this.page,
                        row: this.row,
                        type: 2
                    }
                }
                this.$http.get(apiUrl.admin.users, params).then(res => {
                    if (res.data.code === 0) {
                        if (res.data.result.length < this.row) {
                            this.nullData = true
                        }
                        res.data.result.forEach(v => {
                            this.lists.push(v)
                        })
                    } else {
                        Toast(res.data.msg)
                    }
                    this.loading = false
                }).catch(err => {
                    console.log(err)
                    this.loading = false
                })
            }
        }
    }
</script>

<style scoped lang="less">
@import "../../../assets/css/bases";
    .item {
        color: @primary;
        text-decoration: none;
        border-bottom: @gray solid 1px;
        display: flex;
        padding: 10px 0 10px 10px;
        justify-content: space-between;
        align-items: center;
        .body {
            display: flex;
            flex: 1;
            flex-direction: column;
            .info {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .status {
                    .success {
                        color: #55a532;
                    }
                    .close {
                        color: #FF2045;
                    }
                }
            }
            .room {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .time {
                line-height: 35px;
                color: @gray;
            }
        }
        .fx {
            flex: 0 0 30px;
            color: @gray;
            text-align: center;
        }
    }
    .loading, .null, .next {
        text-align: center;
        height: 35px;
        line-height: 35px;
    }
    .loading, .null {
        color: @gray;
    }
</style>